<template>
    <div class="UpdateDelay" v-loading="loading" :element-loading-text="text">
        <div class="UpdateDelay-file">
            <el-input v-model="value" placeholder="请输入文件名称" :disabled="active"></el-input>
            <el-button type="primary" @click="onConfirm" :disabled="active">确定</el-button>
        </div>
        <el-steps direction="vertical" :active="active" :space="100" v-if="active">
            <el-step v-for="(item, index) in step" :key="item.title">
                <template slot="title">
                    <div class="UpdateDelay-stepTitle">
                        <div>{{ item.title }}</div>
                        <el-button
                            type="primary"
                            v-if="index + 1 == active && index != 10"
                            @click="onStart(item)"
                        >开始</el-button>
                    </div>
                </template>

                <div slot="description">{{ item.description }}</div>
            </el-step>
        </el-steps>
    </div>
</template>

<script>
import { postAdminDelaySetTableNmae, postAdminDelayAdddata, postAdminDelaySavedata, postAdminDelaySetCombine_Sku, postAdminDelaySetsize, postAdminDelaySetpiliangsizenenew, postAdminDelaySetpiliangsize, postAdminDelaySetReplace, postAdminDelaySetpiliangmonth, postAdminDelaySaveamount, postAdminDelayLook_jst_wfh_table } from "@/api";
export default {
    data() {
        return {
            active: false,
            loading: false,
            text: "",
            buttontext: "确定",
            value: "",
            id: "",
            step: [
                {
                    title: "步骤 1",
                    description: "导入未发货订单excel表格"
                },
                {
                    title: "步骤 2",
                    description: "分组未发货数据"
                },
                {
                    title: "步骤 3",
                    description: "统计未发货数据(本步骤需要10分钟以上，请稍后刷新查看)"
                },
                {
                    title: "步骤 4",
                    description: "更新组合商品数据(本步骤需要5分钟左右，请稍后刷新查看)"
                },
                {
                    title: "步骤 5",
                    description: "截取尺寸"
                },
                {
                    title: "步骤 6",
                    description: "过滤新颜色编码"
                },
                {
                    title: "步骤 7",
                    description: "过滤旧颜色编码"
                },
                {
                    title: "步骤 8",
                    description: "替换中文【】"
                },
                {
                    title: "步骤 9",
                    description: "摘出月份"
                },
                {
                    title: "步骤 10",
                    description: "更新延期数"
                }
            ]
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            this.postAdminDelayLook_jst_wfh_table()
        }
        
    },
    methods: {
        postAdminDelayLook_jst_wfh_table() {
            this.loading = true
            let id = this.id
            if (id) {
                let obj = {
                    id
                }
                postAdminDelayLook_jst_wfh_table(obj).then(res => {
                    console.log('查看进度res----------->', res);
                    let data = res.data
                    this.active = data.data_status
                    this.value = data.tablename
                    if (data.data_status_speed == 1) {
                        this.buttontext = '刷新'
                    } else {
                        this.buttontext = '确定'
                    }
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
            }

        },

        onConfirm() {
            this.loading = true
            if (this.value) {
                let obj = {
                    tablename: this.value
                }
                postAdminDelaySetTableNmae(obj).then(res => {
                    console.log('res-------->', res);
                    this.id = res.data
                    this.loading = false
                    this.active = 2
                }).catch(err => {
                    this.loading = false
                })
            } else {
                this.loading = false
                this.$message.warning('请输入文件名称')
            }
        },
        onStart(e) {
            this.loading = true
            if (this.buttontext == '刷新') {
                this.postAdminDelayLook_jst_wfh_table()
            }
            if (e.title == "步骤 2") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelayAdddata(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 3
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 3") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySavedata(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 4
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 4") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySetCombine_Sku(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 5
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 5") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySetsize(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 6
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 6") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySetpiliangsizenenew(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 7
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 7") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySetpiliangsize(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 8
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 8") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySetReplace(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 9
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 9") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySetpiliangmonth(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 10
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
            if (e.title == "步骤 10") {
                let id = this.id
            let obj = {
                    id
                }
                postAdminDelaySaveamount(obj).then(res => {
                    console.log('res-------->', res);
                    this.active = 11
                    this.$router.push({name:'UpdateDelayList'})
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
                return
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.UpdateDelay {
    border-radius: 2px;
    @include global-back;
    @include boxShadow;
    .UpdateDelay-file {
        width: 600px;
        display: flex;
        margin-bottom: 20px;
        /deep/ .el-button {
            margin-left: 20px;
        }
    }
    .UpdateDelay-stepTitle {
        display: flex;
        > div {
            margin-right: 120px;
        }
    }
}
</style>